<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>业绩报表</title>
		<link type="text/css" rel="stylesheet" href="fontsawesome/css/font-awesome.css"/>
		<link type="text/css" rel="stylesheet" href="css/datepicker.css"/>
		<link type="text/css" rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<div class="main_box">
			<h2><span></span>业绩报表</h2>
			<div class="cont_box">
				<!--周、月-->
				<select onchange="selectYJB()" id="selectId">
					<option value="7">最近一周</option>
					<option value="31">最近一月</option>
				</select>
				<!--canvas图标start-->
				<div id="stock_chart" style="width:90%;height:400px"></div>
			</div>
			
				
		</div>
		<!--javascript include-->
		<script src="js/jquery-2.2.1.min.js"></script>
		<script src="js/jquery.dataTables.min.js"></script>
		<script src="js/bootstrap-datepicker.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/other.js"></script>
		<script>
			$(document).ready(function () {
				var yjs="";
				var ssm=0;
				$.ajax({
					url:'/selectYj',
					success:function (data) {
						console.log(data)
						var yj=data.objectMap.result;
						for (let yjKey in yj) {
							yjs+=yj[yjKey].thetotalamountofbusiness+','
						}
						yjs=yjs.substring(0,yjs.length-1)
						ssm=yjs.split(",")

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('stock_chart'));
						// 显示标题，图例和空的坐标轴
						myChart.setOption({
							title:{
								text:"营业数据表"
							},
							grid:{
								top:70,
								bottom:10
							},
							tooltip: {
								trigger:"axis"
							},
							legend:{
								data:["开单数量","总营业额","储值卡消费总额"]
							},
							toolbox: {
								show : true,
								feature : {
									mark : {show: true},
									dataView : {show: true, readOnly: false},
									magicType : {show: true, type: ['line', 'bar']},
									restore : {show: true},
									saveAsImage : {show: true}
								}
							},
							xAxis: {
								name: "日期",
								type: "category",
								boundaryGap: false,
								splitLine: {
									show: true
								},
								data: []
							},
							yAxis: {
								name: "金额"
							},
							series: [{
								name: "金额",
								type: "line",
								smooth: true, //是否平滑曲线展示
								areaStyle: {
									normal: {
										color: "rgba(165, 210, 240, 0.8)" //区域填充颜色
									}
								},
								markPoint:{
									data:[
										{type:"max",name:"最大值"},
										{type:"min",name:"最小值"}
									]
								},
								data: ssm
							}]
						});
					}
				})
			})
			function selectYJB() {
				var yjss="";
				var ssms=0;
				var selectId=document.getElementById("selectId").value
				$.ajax({
					url: '/selectYjLike',
					data:{"selectId":selectId},
					success:function (data) {
						console.log(data)
						var yj=data.objectMap.result;
						for (let yjKey in yj) {
							yjss+=yj[yjKey].thetotalamountofbusiness+','
						}
						yjss=yjss.substring(0,yjss.length-1)
						ssms=yjss.split(",")
						console.log(ssms)
						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('stock_chart'));
						// 显示标题，图例和空的坐标轴
						myChart.setOption({
							title:{
								text:"营业数据表"
							},
							grid:{
								top:70,
								bottom:10
							},
							tooltip: {
								trigger:"axis"
							},
							legend:{
								data:["开单数量","总营业额","储值卡消费总额"]
							},
							toolbox: {
								show : true,
								feature : {
									mark : {show: true},
									dataView : {show: true, readOnly: false},
									magicType : {show: true, type: ['line', 'bar']},
									restore : {show: true},
									saveAsImage : {show: true}
								}
							},
							xAxis: {
								name: "日期",
								type: "category",
								boundaryGap: false,
								splitLine: {
									show: true
								},
								data: []
							},
							yAxis: {
								name: "金额"
							},
							series: [{
								name: "金额",
								type: "line",
								smooth: true, //是否平滑曲线展示
								areaStyle: {
									normal: {
										color: "rgba(165, 210, 240, 0.8)" //区域填充颜色
									}
								},
								markPoint:{
									data:[
										{type:"max",name:"最大值"},
										{type:"min",name:"最小值"}
									]
								},
								data: ssms
							}]
						});
					}
				})
			}
		</script>
	</body>
</html>
